今天想要來介紹一個 CSS 屬性 - filter，
這個 filter 在想要做 png 的陰影的時候很好用，
或是你想要讓彩色的照片變黑白 or 變懷舊，都可以使用他，
不過使用 filter 似乎滿耗效能的，就斟酌使用吧！
以下的圖片我都會用我的大頭照來做範例。

blur

就是讓他模糊啦～ () 裡面需要填上像素 or rem。

img{
  filter: blur(5px);
}

brightness

裡面的值可以是百分比或是單純的數值，小於 1 或是 100% 的話，圖片會變暗，大於的話會變亮。

img{
  filter: brightness(0.4); /*  filter: brightness(40%) */
}

contrast

就是調整對比啦，看你是要讓圖片的顏色比較鮮明還是比較無差異，
值的話跟 brightness 一樣，小於 1 或是 100% 的話，圖片對比較不強烈，大於的話會變鮮明。

img{
  filter: contrast(50%);
}

drop-shadow

是個跟 box-shadow 類似的東西，但是 png 檔的話就可以做出圖片本人的陰影，而不是一整個外框的陰影。
值：drop-shadow(offset-x offset-y blur-radius color)

img{
  filter: drop-shadow(6px 6px 10px red);
}

box-shadow 長這樣

grayscale

讓彩色照片變黑白的灰階，其值介於 0 - 100% 之間，100% 就是完全的灰階。

img{
  filter: grayscale(90%);
}

sepia

sepia 是深褐色的意思，其值介於 0 - 100% 之間，100% 就是完全深褐色調，可以拿來做懷舊感的圖片。

img{
  filter: sepia(60%);
}

hue-rotate

色相旋轉，可以讓你原本的顏色通通變調，這需要認識什麼是色相環，附上維基，
值介於 0 - 360deg 之間。

img{
  filter: hue-rotate(180deg);
}

invert

負片效果，明暗相反、顏色變為互補色，值介於 0 - 1(100%) 之間。

img{
  filter: invert(.8);
}

opacity

其實跟 CSS 中的 opacity 是一樣的意思，我看不太出來差別，
是我就會選擇用 opacity 就好，值介於 0 - 1(100%) 之間。

img{
  filter: opacity(.2);
}

saturate

色彩飽和度，小於 1 或是 100% 的話，顏色沒那麼飽和，大於的話顏色越飽和。

img{
  filter: saturate(4);
}

希望這個有讓大家更認識 filter，
今天就先到這裡啦～
我們明天見。